<template>
  <view>
    <!-- 商品详情 -->
    <swiper class="goodsImgswiper-box" :indicator-dots="false" :autoplay="false">
      <swiper-item>
        <image v-if="props.productInfo.images.length > 0" class="goodsImg default-img u-skeleton-fillet" :src="props.productInfo.images[goodsCoverSelected]"></image>
      </swiper-item>
    </swiper>
    <!-- 商品展示图横向列表 -->
    <view class="goods_cover_box">
      <view class="goods_cover_list flex items-center" :style="{ width: props.productInfo.images.length * 144 - 24 + 'rpx' }">
        <view class="goods_cover_item border-box" v-for="(imgItem, index) in props.productInfo.images" :key="index" :class="goodsCoverSelected === index ? 'active' : ''" @click="goodsCoverSelected = index">
          <image :src="imgItem" style="width: 100%; height: 100%"></image>
        </view>
      </view>
    </view>
    <view class="goodgDes-box">
      <view class="priceBuyNum-box flex-display u-skeleton-fillet flex-sp-between mar-left-30 flex-wrap">
        <view>
          <label style="color: #ff5000; font-size: 48rpx">¥</label>
          <label style="color: #ff5000; font-size: 48rpx" class="mar-left-5">{{ props.skuSelect.price || 0 }}</label>
          <label style="color: #9ca3af; font-size: 32rpx;white-space: nowrap;" class="mar-left-10 discountsPriceLine"
            >¥
            {{ props.skuSelect.originalPrice || 0 }}
          </label>
        </view>
      </view>

      <view class="nameContainer justify-between flex-items">
        <view class="goodsName-box overflowNoDot u-skeleton-fillet">
          <label class="goodsName fs32">{{ props.productInfo.productName }}</label>
        </view>
        <view class="collectBox" @click="shareMenuShow">
          <image class="store-icon" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/goods-detail/goods_detail_share.png`"></image>
          <label class="fs22">分享</label>
        </view>
      </view>
    </view>

    <!--  分享弹出  -->
    <u-action-sheet :list="shareObj.actionList" v-model="shareObj.actionShow" @click="handleShareSelect"></u-action-sheet>

    <ShareSpell ref="shareSpell" :url="shareObj.url" :img="shareObj.image" :title="shareObj.title" @shareCancel="shareCancel" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { request } from "@/utils/request";
import API from "@/config/api";
import ShareSpell from "@/component/share.vue";
import { TimeFormatting } from "@/utils/timeUtil";
import { onShareTimeline } from "@dcloudio/uni-app";
import { VUE_APP_STATIC_URL } from "@/config/api";
import FullUniIcons from "@/component/full-uni-icons";

const props = defineProps({
  // 商品信息
  productInfo: {
    type: Object,
    default: () => ({}),
  },
  // 当前选中的sku
  skuSelect: {
    type: Object,
    default: () => ({}),
  },
  timeActiveType: {
    type: Boolean,
    default: () => false,
  },
});
const emit = defineEmits(["couponClick"]);



// ====================================================== 分享相关 =======================================================
// 分享信息对象
const shareObj = ref({
  url: "",
  image: "",
  title: "好友分享了一个很棒的商品",
  actionList: [{ text: "生成分享海报" }, { text: "邀请好友" }],
  actionShow: false,
});

// 分享REF
const shareSpell = ref();

/**
 * 打开分享上拉
 */
function shareMenuShow() {
  shareObj.value.actionShow = true;
}

/**
 * 关闭分享菜单
 */
function shareCancel() {
  shareSpell.value.shareShow = false;
}

/**
 * 选择分享菜单后
 * @param index
 */
function handleShareSelect(index) {
  if (index === 0) {
    // 海报分享
    sharePoster();
  } else {
    shareObj.value.url = "/zwx_category_page1/goodsModule/goodsDetails?shopId=" + props.productInfo.shopId + "&productId=" + props.productInfo.productId + "&skuId=" + props.skuSelect.skuId;
    shareObj.value.image = props.productInfo.images[0];
    shareObj.value.title = `【zkmall】好友分享了一个好物给您！${props.productInfo.productName} ￥${props.productInfo.price} `;
    shareSpell.value.shareShow = true;
  }
}

onShareTimeline(() => ({
  title: `【zkmall】好友分享了一个好物给您！${props.productInfo.productName} ￥${props.productInfo.price} `,
  imageUrl: props.productInfo.images[0],
  path: "/zwx_category_page1/goodsModule/goodsDetails?shopId=" + props.productInfo.shopId + "&productId=" + props.productInfo.productId + "&skuId=" + props.skuSelect.skuId,
}));

/**
 * 海报分享
 */
function sharePoster() {
  let system = undefined;
  // #ifdef APP-PLUS
  system = 1;
  // #endif

  // #ifdef H5
  system = 3;
  // #endif

  // #ifdef MP-WEIXIN
  system = 2;
  // #endif

  // #ifdef MP-ALIPAY
  system = 4;
  // #endif
  // 推广商品
  uni.setStorageSync("shareItem", {
    title: props.productInfo.productName,
    image: props.productInfo.image || props.productInfo.images[0],
  })
  uni.navigateTo({
    url: `/zwx_category_page1/distributionModule/shareProduct?shareType=2&shopId=${props.productInfo.shopId}&productId=${props.productInfo.productId}&skuId=${props.skuSelect.skuId}&terminal=${system}`,
  });
}

// 商品展示图列表选中项索引
const goodsCoverSelected = ref(0);

</script>

<style lang="scss" scoped>
@import "../../../style/images";
.goodsImgswiper-box {
  width: 750upx;
  height: 750upx;

  .goodsImg {
    width: 750upx;
    height: 750upx;
  }
}

.share-box {
  width: 200upx;
  height: 60upx;
  background-color: #ffffff;
  border-radius: 30upx 0 0 30upx;
  position: absolute;
  top: 30upx;
  right: 0;
  z-index: 99;

  .share-img {
    width: 36upx;
    height: 36upx;
  }
}

.goodgDes-box {
  background-color: #ffffff;
  width: 686rpx;
  padding-bottom: 25upx;
  margin: 32rpx auto 0;

  .priceBuyNum-box {
    width: 677upx;
    margin-top: 30upx;
  }

  .nameContainer {
    display: flex;

    .goodsName-box {
      width: 677upx;
      // height: 85upx;

      .img618-cion {
        width: 70upx;
        height: 36upx;
      }
      .goodsName {
        // display: -webkit-box;
        // -webkit-line-clamp: 2;
        // -webkit-box-orient: vertical;
        // overflow: hidden;
        // text-overflow: ellipsis;
        line-height: 48rpx;

        &::before {
          content: "限时优惠";
          display: inline-block;
          width: 128rpx;
          height: 48rpx;
          background: #ff5000;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-family: Roboto, Roboto;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
          line-height: 48rpx;
          text-align: center;
          margin-right: 10rpx;
        }
      }
    }

    .collectBox {
      width: 80rpx;
      margin: 0 30rpx 0 15rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .store-icon {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 10rpx;
    }
  }

  .discounts-box {
    margin-top: 20upx;

    .discounts-text {
      margin-left: 10upx;
      color: #ff7800;
      background-color: #ffe4cc;
      padding: 6upx 12upx;
      border-radius: 4upx;
    }
  }

  .activity-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    border-top: 1upx solid #ededed;

    .activity-content {
      width: 614upx;
      padding-top: 20upx;

      .activity-text {
        color: #ff7700;
        border: 1upx solid #ff7700;
        padding: 6upx 23upx;
      }

      .coupon-arrow {
        width: 16upx;
        height: 24upx;
        margin-left: 15upx;
      }
    }
  }
}

.seckill-box {
  width: 100%;
  height: 238rpx;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  border-radius: 16rpx;
  padding:0 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .countdown {
    text-align: center;

    label {
      text-align: center;
      color: #cccccc;
    }
  }

  .countdown-box {
    padding: 0 8rpx;
    height: 48rpx;
    color: #fff;
    background: rgba(255, 255, 255, 0.3);
    margin: 10rpx;
    border-radius: 8rpx;
  }
}
.sceneMarketingBox {
  width: 100%;
  background: $sceneMarketingDetailsIcon no-repeat center;
  padding: 20rpx 30rpx;
  // background-size: cover;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .sceneNameBox {
    width: 220rpx;
    text-align: center;
    color: #EF4444;
    font-size: 20rpx;
  }
}

.goods_cover_box {
  width: 686rpx;
  margin: 24rpx auto 0;
  overflow-x: auto;
  .goods_cover_list {
    .goods_cover_item {
      width: 120rpx;
      height: 120rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      overflow: hidden;
      border: 4rpx solid #e5e7eb;
      margin-right: 24rpx;
      &.active {
        border-color: #ff5000;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
